import React from 'react';
import {
    View,
    StyleSheet,
    TouchableOpacity,
} from 'react-native';
import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons';
import AntDesign from 'react-native-vector-icons/AntDesign';
import color from '../../public/widget/color';
import {Heading3} from '../../public/widget/text';
export default class UserItem extends React.Component {
    render() {
        const {usersData ,LinkView} = this.props;
        return  <View style={styles.menuCont}>
                    {usersData.map((info,i)=>(
                            <TouchableOpacity key={i} onPress={()=>{LinkView(i)}}>
                                <View style={styles.menuItem}>
                                    {i==0?<AntDesign
                                        style={styles.antdIcon}
                                        name={'tags'}
                                        size={20}/>:<SimpleLineIcons
                                        style={styles.antdIcon}
                                        name={'wallet'}
                                        size={20}/>}
                                    <Heading3>
                                        {info.text}
                                    </Heading3>
                                    <SimpleLineIcons
                                        style={styles.simpleIcon}
                                        name={'arrow-right'}
                                        size={15}/>
                                </View> 
                            </TouchableOpacity>
                    ))}     
                    <View style={styles.lastViewItem}></View>  
                </View>
    }
}
const styles = StyleSheet.create({
    menuCont:{
        paddingLeft:20,
        paddingRight:20,
    },
    menuItem:{
        position:'relative',
        top:-20,
        paddingBottom:15,
        paddingTop: 15,
        flexDirection:'row',
        alignItems:'center',
        borderBottomWidth: 1,
        borderBottomColor:color.border
    },
    antdIcon:{
        marginRight:10,
        color:color.themeColor,
    },
    simpleIcon:{
        position:'absolute',
        right:10
    },
    lastViewItem:{
        position:'relative',
        top:-20,
        // borderTopWidth: 1,
        // borderTopColor:color.border
    }
});